@media screen and (max-width: 1098px) {
  #nav li {
    margin-left: 62px;
  }
  #nav li a {
    font-size: 16px;
  }
  #mainItro {
    width: 370px;
    height: 166px;
    margin-left: -185px;
    margin-top: -83px;
  }
  .itro1 {
    font-size: 16px;
  }
  .line {
    border-top: #f5f5f6 3px dashed;
    width: 287px;
  }
  .itro2 {
    font-size: 33px;
  }
  #us {
    font-size: 16px;
    width: 136px;
    height: 40px;
    line-height: 40px;
  }
@-moz-keyframes vChange {
    0% {
      transform: scale(0.3);
      bottom: 52.5%;
    }
    100% {
      transform: scale(0.8);
      bottom: 80%;
    }
}
@-webkit-keyframes vChange {
    0% {
      transform: scale(0.3);
      bottom: 52.5%;
    }
    100% {
      transform: scale(0.8);
      bottom: 80%;
    }
}
@-o-keyframes vChange {
    0% {
      transform: scale(0.3);
      bottom: 52.5%;
    }
    100% {
      transform: scale(0.8);
      bottom: 80%;
    }
}
@keyframes vChange {
    0% {
      transform: scale(0.3);
      bottom: 52.5%;
    }
    100% {
      transform: scale(0.8);
      bottom: 80%;
    }
}
@-moz-keyframes t1Change {
    0% {
      width: 0px;
      height: 0px;
      transform: skew(-25deg) scale(1);
      top: 39%;
      left: 46%;
    }
    20% {
      width: 0px;
      height: 0px;
      transform: skew(-17deg) scale(0.5);
      top: 35%;
      left: 39.5%;
    }
    21% {
      width: 200px;
      height: 203px;
      border: none;
      filter: none;
      background: url("../img/spape.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 15%;
      top: 26%;
      left: 32.5%;
    }
    100% {
      width: 200px;
      height: 203px;
      border: none;
      filter: none;
      background: url("../img/spape.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 70%;
      top: 30%;
      left: -3%;
    }
}
@-webkit-keyframes t1Change {
    0% {
      width: 0px;
      height: 0px;
      transform: skew(-25deg) scale(1);
      top: 39%;
      left: 46%;
    }
    20% {
      width: 0px;
      height: 0px;
      transform: skew(-17deg) scale(0.5);
      top: 35%;
      left: 39.5%;
    }
    21% {
      width: 200px;
      height: 203px;
      border: none;
      filter: none;
      background: url("../img/spape.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 15%;
      top: 26%;
      left: 32.5%;
    }
    100% {
      width: 200px;
      height: 203px;
      border: none;
      filter: none;
      background: url("../img/spape.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 70%;
      top: 30%;
      left: -3%;
    }
}
@-o-keyframes t1Change {
    0% {
      width: 0px;
      height: 0px;
      transform: skew(-25deg) scale(1);
      top: 39%;
      left: 46%;
    }
    20% {
      width: 0px;
      height: 0px;
      transform: skew(-17deg) scale(0.5);
      top: 35%;
      left: 39.5%;
    }
    21% {
      width: 200px;
      height: 203px;
      border: none;
      filter: none;
      background: url("../img/spape.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 15%;
      top: 26%;
      left: 32.5%;
    }
    100% {
      width: 200px;
      height: 203px;
      border: none;
      filter: none;
      background: url("../img/spape.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 70%;
      top: 30%;
      left: -3%;
    }
}
@keyframes t1Change {
    0% {
      width: 0px;
      height: 0px;
      transform: skew(-25deg) scale(1);
      top: 39%;
      left: 46%;
    }
    20% {
      width: 0px;
      height: 0px;
      transform: skew(-17deg) scale(0.5);
      top: 35%;
      left: 39.5%;
    }
    21% {
      width: 200px;
      height: 203px;
      border: none;
      filter: none;
      background: url("../img/spape.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 15%;
      top: 26%;
      left: 32.5%;
    }
    100% {
      width: 200px;
      height: 203px;
      border: none;
      filter: none;
      background: url("../img/spape.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 70%;
      top: 30%;
      left: -3%;
    }
}
@-moz-keyframes t2Change {
    0% {
      width: 0px;
      height: 0px;
      top: 44%;
      left: 46.5%;
    }
    10% {
      width: 0px;
      height: 0px;
      transform: scale(0);
      top: 43%;
      left: 42.5%;
    }
    11% {
      width: 224px;
      height: 180px;
      border: none;
      filter: none;
      background: url("../img/cap.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 30%;
      top: 30%;
      left: 35%;
    }
    100% {
      width: 224px;
      height: 180px;
      border: none;
      filter: none;
      background: url("../img/cap.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 70%;
      top: 53%;
      left: 4%;
      opacity: 1;
    }
}
@-webkit-keyframes t2Change {
    0% {
      width: 0px;
      height: 0px;
      top: 44%;
      left: 46.5%;
    }
    10% {
      width: 0px;
      height: 0px;
      transform: scale(0);
      top: 43%;
      left: 42.5%;
    }
    11% {
      width: 224px;
      height: 180px;
      border: none;
      filter: none;
      background: url("../img/cap.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 30%;
      top: 30%;
      left: 35%;
    }
    100% {
      width: 224px;
      height: 180px;
      border: none;
      filter: none;
      background: url("../img/cap.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 70%;
      top: 53%;
      left: 4%;
      opacity: 1;
    }
}
@-o-keyframes t2Change {
    0% {
      width: 0px;
      height: 0px;
      top: 44%;
      left: 46.5%;
    }
    10% {
      width: 0px;
      height: 0px;
      transform: scale(0);
      top: 43%;
      left: 42.5%;
    }
    11% {
      width: 224px;
      height: 180px;
      border: none;
      filter: none;
      background: url("../img/cap.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 30%;
      top: 30%;
      left: 35%;
    }
    100% {
      width: 224px;
      height: 180px;
      border: none;
      filter: none;
      background: url("../img/cap.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 70%;
      top: 53%;
      left: 4%;
      opacity: 1;
    }
}
@keyframes t2Change {
    0% {
      width: 0px;
      height: 0px;
      top: 44%;
      left: 46.5%;
    }
    10% {
      width: 0px;
      height: 0px;
      transform: scale(0);
      top: 43%;
      left: 42.5%;
    }
    11% {
      width: 224px;
      height: 180px;
      border: none;
      filter: none;
      background: url("../img/cap.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 30%;
      top: 30%;
      left: 35%;
    }
    100% {
      width: 224px;
      height: 180px;
      border: none;
      filter: none;
      background: url("../img/cap.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 70%;
      top: 53%;
      left: 4%;
      opacity: 1;
    }
}
@-moz-keyframes t3Change {
    0% {
      width: 0px;
      height: 0px;
      transform: skew(17deg);
      top: 58%;
      left: 45%;
    }
    20% {
      width: 0px;
      height: 0px;
      transform: scale(0) skew(17deg);
      top: 62%;
      left: 42.5%;
    }
    21% {
      width: 156px;
      height: 149px;
      border: none;
      filter: none;
      background: url("../img/glasses.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 40%;
      top: 53%;
      left: 38%;
    }
    100% {
      width: 156px;
      height: 149px;
      border: none;
      filter: none;
      background: url("../img/glasses.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 70%;
      top: 70%;
      left: 22%;
      opacity: 1;
    }
}
@-webkit-keyframes t3Change {
    0% {
      width: 0px;
      height: 0px;
      transform: skew(17deg);
      top: 58%;
      left: 45%;
    }
    20% {
      width: 0px;
      height: 0px;
      transform: scale(0) skew(17deg);
      top: 62%;
      left: 42.5%;
    }
    21% {
      width: 156px;
      height: 149px;
      border: none;
      filter: none;
      background: url("../img/glasses.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 40%;
      top: 53%;
      left: 38%;
    }
    100% {
      width: 156px;
      height: 149px;
      border: none;
      filter: none;
      background: url("../img/glasses.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 70%;
      top: 70%;
      left: 22%;
      opacity: 1;
    }
}
@-o-keyframes t3Change {
    0% {
      width: 0px;
      height: 0px;
      transform: skew(17deg);
      top: 58%;
      left: 45%;
    }
    20% {
      width: 0px;
      height: 0px;
      transform: scale(0) skew(17deg);
      top: 62%;
      left: 42.5%;
    }
    21% {
      width: 156px;
      height: 149px;
      border: none;
      filter: none;
      background: url("../img/glasses.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 40%;
      top: 53%;
      left: 38%;
    }
    100% {
      width: 156px;
      height: 149px;
      border: none;
      filter: none;
      background: url("../img/glasses.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 70%;
      top: 70%;
      left: 22%;
      opacity: 1;
    }
}
@keyframes t3Change {
    0% {
      width: 0px;
      height: 0px;
      transform: skew(17deg);
      top: 58%;
      left: 45%;
    }
    20% {
      width: 0px;
      height: 0px;
      transform: scale(0) skew(17deg);
      top: 62%;
      left: 42.5%;
    }
    21% {
      width: 156px;
      height: 149px;
      border: none;
      filter: none;
      background: url("../img/glasses.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 40%;
      top: 53%;
      left: 38%;
    }
    100% {
      width: 156px;
      height: 149px;
      border: none;
      filter: none;
      background: url("../img/glasses.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 70%;
      top: 70%;
      left: 22%;
      opacity: 1;
    }
}
@-moz-keyframes t4Change {
    0% {
      width: 0px;
      height: 0px;
      top: 55%;
      left: 46%;
    }
    20% {
      width: 0px;
      height: 0px;
      transform: scale(0);
      top: 60%;
      left: 43%;
    }
    21% {
      width: 376px;
      height: 298px;
      border: none;
      filter: none;
      background: url("../img/pad.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 20%;
      top: 38%;
      left: 30%;
    }
    100% {
      width: 376px;
      height: 298px;
      border: none;
      filter: none;
      background: url("../img/pad.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 70%;
      top: 76.5%;
      left: -5%;
      opacity: 1;
    }
}
@-webkit-keyframes t4Change {
    0% {
      width: 0px;
      height: 0px;
      top: 55%;
      left: 46%;
    }
    20% {
      width: 0px;
      height: 0px;
      transform: scale(0);
      top: 60%;
      left: 43%;
    }
    21% {
      width: 376px;
      height: 298px;
      border: none;
      filter: none;
      background: url("../img/pad.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 20%;
      top: 38%;
      left: 30%;
    }
    100% {
      width: 376px;
      height: 298px;
      border: none;
      filter: none;
      background: url("../img/pad.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 70%;
      top: 76.5%;
      left: -5%;
      opacity: 1;
    }
}
@-o-keyframes t4Change {
    0% {
      width: 0px;
      height: 0px;
      top: 55%;
      left: 46%;
    }
    20% {
      width: 0px;
      height: 0px;
      transform: scale(0);
      top: 60%;
      left: 43%;
    }
    21% {
      width: 376px;
      height: 298px;
      border: none;
      filter: none;
      background: url("../img/pad.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 20%;
      top: 38%;
      left: 30%;
    }
    100% {
      width: 376px;
      height: 298px;
      border: none;
      filter: none;
      background: url("../img/pad.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 70%;
      top: 76.5%;
      left: -5%;
      opacity: 1;
    }
}
@keyframes t4Change {
    0% {
      width: 0px;
      height: 0px;
      top: 55%;
      left: 46%;
    }
    20% {
      width: 0px;
      height: 0px;
      transform: scale(0);
      top: 60%;
      left: 43%;
    }
    21% {
      width: 376px;
      height: 298px;
      border: none;
      filter: none;
      background: url("../img/pad.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 20%;
      top: 38%;
      left: 30%;
    }
    100% {
      width: 376px;
      height: 298px;
      border: none;
      filter: none;
      background: url("../img/pad.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 70%;
      top: 76.5%;
      left: -5%;
      opacity: 1;
    }
}
@-moz-keyframes t5Change {
    0% {
      width: 0px;
      height: 0px;
      top: 52%;
      left: 51.5%;
    }
    20% {
      width: 0px;
      height: 0px;
      transform: scale(0);
      top: 53%;
      left: 53%;
    }
    21% {
      width: 140px;
      height: 157px;
      border: none;
      filter: none;
      background: url("../img/pen.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 20%;
      top: 43%;
      left: 48%;
    }
    100% {
      width: 140px;
      height: 157px;
      border: none;
      filter: none;
      background: url("../img/pen.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 70%;
      top: 75%;
      left: 87%;
      opacity: 1;
    }
}
@-webkit-keyframes t5Change {
    0% {
      width: 0px;
      height: 0px;
      top: 52%;
      left: 51.5%;
    }
    20% {
      width: 0px;
      height: 0px;
      transform: scale(0);
      top: 53%;
      left: 53%;
    }
    21% {
      width: 140px;
      height: 157px;
      border: none;
      filter: none;
      background: url("../img/pen.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 20%;
      top: 43%;
      left: 48%;
    }
    100% {
      width: 140px;
      height: 157px;
      border: none;
      filter: none;
      background: url("../img/pen.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 70%;
      top: 75%;
      left: 87%;
      opacity: 1;
    }
}
@-o-keyframes t5Change {
    0% {
      width: 0px;
      height: 0px;
      top: 52%;
      left: 51.5%;
    }
    20% {
      width: 0px;
      height: 0px;
      transform: scale(0);
      top: 53%;
      left: 53%;
    }
    21% {
      width: 140px;
      height: 157px;
      border: none;
      filter: none;
      background: url("../img/pen.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 20%;
      top: 43%;
      left: 48%;
    }
    100% {
      width: 140px;
      height: 157px;
      border: none;
      filter: none;
      background: url("../img/pen.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 70%;
      top: 75%;
      left: 87%;
      opacity: 1;
    }
}
@keyframes t5Change {
    0% {
      width: 0px;
      height: 0px;
      top: 52%;
      left: 51.5%;
    }
    20% {
      width: 0px;
      height: 0px;
      transform: scale(0);
      top: 53%;
      left: 53%;
    }
    21% {
      width: 140px;
      height: 157px;
      border: none;
      filter: none;
      background: url("../img/pen.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 20%;
      top: 43%;
      left: 48%;
    }
    100% {
      width: 140px;
      height: 157px;
      border: none;
      filter: none;
      background: url("../img/pen.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 70%;
      top: 75%;
      left: 87%;
      opacity: 1;
    }
}
@-moz-keyframes t6Change {
    0% {
      width: 0px;
      height: 0px;
      top: 48%;
      left: 52.7%;
      transform: skew(-18deg);
    }
    20% {
      width: 0px;
      height: 0px;
      transform: scale(0) skew(-10deg);
      top: 55%;
      left: 55.7%;
    }
    21% {
      width: 92px;
      height: 99px;
      border: none;
      filter: none;
      background: url("../img/rubber.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 40%;
      top: 48%;
      left: 51.7%;
    }
    100% {
      width: 92px;
      height: 99px;
      border: none;
      filter: none;
      background: url("../img/rubber.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 70%;
      top: 76.5%;
      left: 74%;
      opacity: 1;
    }
}
@-webkit-keyframes t6Change {
    0% {
      width: 0px;
      height: 0px;
      top: 48%;
      left: 52.7%;
      transform: skew(-18deg);
    }
    20% {
      width: 0px;
      height: 0px;
      transform: scale(0) skew(-10deg);
      top: 55%;
      left: 55.7%;
    }
    21% {
      width: 92px;
      height: 99px;
      border: none;
      filter: none;
      background: url("../img/rubber.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 40%;
      top: 48%;
      left: 51.7%;
    }
    100% {
      width: 92px;
      height: 99px;
      border: none;
      filter: none;
      background: url("../img/rubber.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 70%;
      top: 76.5%;
      left: 74%;
      opacity: 1;
    }
}
@-o-keyframes t6Change {
    0% {
      width: 0px;
      height: 0px;
      top: 48%;
      left: 52.7%;
      transform: skew(-18deg);
    }
    20% {
      width: 0px;
      height: 0px;
      transform: scale(0) skew(-10deg);
      top: 55%;
      left: 55.7%;
    }
    21% {
      width: 92px;
      height: 99px;
      border: none;
      filter: none;
      background: url("../img/rubber.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 40%;
      top: 48%;
      left: 51.7%;
    }
    100% {
      width: 92px;
      height: 99px;
      border: none;
      filter: none;
      background: url("../img/rubber.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 70%;
      top: 76.5%;
      left: 74%;
      opacity: 1;
    }
}
@keyframes t6Change {
    0% {
      width: 0px;
      height: 0px;
      top: 48%;
      left: 52.7%;
      transform: skew(-18deg);
    }
    20% {
      width: 0px;
      height: 0px;
      transform: scale(0) skew(-10deg);
      top: 55%;
      left: 55.7%;
    }
    21% {
      width: 92px;
      height: 99px;
      border: none;
      filter: none;
      background: url("../img/rubber.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 40%;
      top: 48%;
      left: 51.7%;
    }
    100% {
      width: 92px;
      height: 99px;
      border: none;
      filter: none;
      background: url("../img/rubber.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 70%;
      top: 76.5%;
      left: 74%;
      opacity: 1;
    }
}
@-moz-keyframes t7Change {
    0% {
      width: 0px;
      height: 0px;
      top: 40%;
      left: 55%;
    }
    10% {
      width: 0px;
      height: 0px;
      transform: scale(0) skew(18deg);
      top: 42%;
      left: 57%;
    }
    11% {
      width: 612px;
      height: 570px;
      border: none;
      filter: none;
      background: url("../img/pape.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 0%;
      top: 44%;
      left: 38%;
    }
    100% {
      width: 612px;
      height: 570px;
      border: none;
      filter: none;
      background: url("../img/pape.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 70%;
      top: 32%;
      left: 72.5%;
      opacity: 1;
      z-index: -1;
      transform: skew(0);
    }
}
@-webkit-keyframes t7Change {
    0% {
      width: 0px;
      height: 0px;
      top: 40%;
      left: 55%;
    }
    10% {
      width: 0px;
      height: 0px;
      transform: scale(0) skew(18deg);
      top: 42%;
      left: 57%;
    }
    11% {
      width: 612px;
      height: 570px;
      border: none;
      filter: none;
      background: url("../img/pape.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 0%;
      top: 44%;
      left: 38%;
    }
    100% {
      width: 612px;
      height: 570px;
      border: none;
      filter: none;
      background: url("../img/pape.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 70%;
      top: 32%;
      left: 72.5%;
      opacity: 1;
      z-index: -1;
      transform: skew(0);
    }
}
@-o-keyframes t7Change {
    0% {
      width: 0px;
      height: 0px;
      top: 40%;
      left: 55%;
    }
    10% {
      width: 0px;
      height: 0px;
      transform: scale(0) skew(18deg);
      top: 42%;
      left: 57%;
    }
    11% {
      width: 612px;
      height: 570px;
      border: none;
      filter: none;
      background: url("../img/pape.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 0%;
      top: 44%;
      left: 38%;
    }
    100% {
      width: 612px;
      height: 570px;
      border: none;
      filter: none;
      background: url("../img/pape.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 70%;
      top: 32%;
      left: 72.5%;
      opacity: 1;
      z-index: -1;
      transform: skew(0);
    }
}
@keyframes t7Change {
    0% {
      width: 0px;
      height: 0px;
      top: 40%;
      left: 55%;
    }
    10% {
      width: 0px;
      height: 0px;
      transform: scale(0) skew(18deg);
      top: 42%;
      left: 57%;
    }
    11% {
      width: 612px;
      height: 570px;
      border: none;
      filter: none;
      background: url("../img/pape.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 0%;
      top: 44%;
      left: 38%;
    }
    100% {
      width: 612px;
      height: 570px;
      border: none;
      filter: none;
      background: url("../img/pape.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 70%;
      top: 32%;
      left: 72.5%;
      opacity: 1;
      z-index: -1;
      transform: skew(0);
    }
}
@-moz-keyframes t8Change {
    0% {
      width: 0px;
      height: 0px;
      top: 36%;
      left: 52%;
    }
    20% {
      width: 0px;
      height: 0px;
      transform: scale(0);
      top: 35%;
      left: 60%;
    }
    21% {
      width: 140px;
      height: 157px;
      border: none;
      filter: none;
      background: url("../img/scup.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 40%;
      top: 24%;
      left: 55%;
    }
    100% {
      width: 140px;
      height: 157px;
      border: none;
      filter: none;
      background: url("../img/scup.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 65%;
      top: 33%;
      left: 75%;
      opacity: 1;
    }
}
@-webkit-keyframes t8Change {
    0% {
      width: 0px;
      height: 0px;
      top: 36%;
      left: 52%;
    }
    20% {
      width: 0px;
      height: 0px;
      transform: scale(0);
      top: 35%;
      left: 60%;
    }
    21% {
      width: 140px;
      height: 157px;
      border: none;
      filter: none;
      background: url("../img/scup.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 40%;
      top: 24%;
      left: 55%;
    }
    100% {
      width: 140px;
      height: 157px;
      border: none;
      filter: none;
      background: url("../img/scup.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 65%;
      top: 33%;
      left: 75%;
      opacity: 1;
    }
}
@-o-keyframes t8Change {
    0% {
      width: 0px;
      height: 0px;
      top: 36%;
      left: 52%;
    }
    20% {
      width: 0px;
      height: 0px;
      transform: scale(0);
      top: 35%;
      left: 60%;
    }
    21% {
      width: 140px;
      height: 157px;
      border: none;
      filter: none;
      background: url("../img/scup.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 40%;
      top: 24%;
      left: 55%;
    }
    100% {
      width: 140px;
      height: 157px;
      border: none;
      filter: none;
      background: url("../img/scup.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 65%;
      top: 33%;
      left: 75%;
      opacity: 1;
    }
}
@keyframes t8Change {
    0% {
      width: 0px;
      height: 0px;
      top: 36%;
      left: 52%;
    }
    20% {
      width: 0px;
      height: 0px;
      transform: scale(0);
      top: 35%;
      left: 60%;
    }
    21% {
      width: 140px;
      height: 157px;
      border: none;
      filter: none;
      background: url("../img/scup.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 40%;
      top: 24%;
      left: 55%;
    }
    100% {
      width: 140px;
      height: 157px;
      border: none;
      filter: none;
      background: url("../img/scup.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 65%;
      top: 33%;
      left: 75%;
      opacity: 1;
    }
}
}
@media screen and (max-width: 840px) {
  #nav li {
    margin-left: 60px;
  }
  #nav li a {
    font-size: 15px;
  }
  #mainItro {
    width: 316px;
    height: 156px;
    margin-left: -158px;
    margin-top: -78px;
  }
  .itro1 {
    font-size: 14px;
  }
  .line {
    border-top: #f5f5f6 3px dashed;
    width: 251px;
  }
  .itro2 {
    font-size: 28px;
  }
  #us {
    font-size: 14px;
    width: 125px;
    height: 35px;
    line-height: 35px;
  }
@-moz-keyframes vChange {
    0% {
      transform: scale(0.3);
      bottom: 52.5%;
    }
    100% {
      transform: scale(0.8);
      bottom: 79%;
    }
}
@-webkit-keyframes vChange {
    0% {
      transform: scale(0.3);
      bottom: 52.5%;
    }
    100% {
      transform: scale(0.8);
      bottom: 79%;
    }
}
@-o-keyframes vChange {
    0% {
      transform: scale(0.3);
      bottom: 52.5%;
    }
    100% {
      transform: scale(0.8);
      bottom: 79%;
    }
}
@keyframes vChange {
    0% {
      transform: scale(0.3);
      bottom: 52.5%;
    }
    100% {
      transform: scale(0.8);
      bottom: 79%;
    }
}
@-moz-keyframes t1Change {
    0% {
      width: 0px;
      height: 0px;
      transform: skew(-25deg) scale(1);
      top: 39%;
      left: 46%;
    }
    20% {
      width: 0px;
      height: 0px;
      transform: skew(-17deg) scale(0.5);
      top: 35%;
      left: 39.5%;
    }
    21% {
      width: 200px;
      height: 203px;
      border: none;
      filter: none;
      background: url("../img/spape.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 13%;
      top: 26%;
      left: 32.5%;
    }
    100% {
      width: 200px;
      height: 203px;
      border: none;
      filter: none;
      background: url("../img/spape.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 65%;
      top: 34%;
      left: -4%;
    }
}
@-webkit-keyframes t1Change {
    0% {
      width: 0px;
      height: 0px;
      transform: skew(-25deg) scale(1);
      top: 39%;
      left: 46%;
    }
    20% {
      width: 0px;
      height: 0px;
      transform: skew(-17deg) scale(0.5);
      top: 35%;
      left: 39.5%;
    }
    21% {
      width: 200px;
      height: 203px;
      border: none;
      filter: none;
      background: url("../img/spape.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 13%;
      top: 26%;
      left: 32.5%;
    }
    100% {
      width: 200px;
      height: 203px;
      border: none;
      filter: none;
      background: url("../img/spape.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 65%;
      top: 34%;
      left: -4%;
    }
}
@-o-keyframes t1Change {
    0% {
      width: 0px;
      height: 0px;
      transform: skew(-25deg) scale(1);
      top: 39%;
      left: 46%;
    }
    20% {
      width: 0px;
      height: 0px;
      transform: skew(-17deg) scale(0.5);
      top: 35%;
      left: 39.5%;
    }
    21% {
      width: 200px;
      height: 203px;
      border: none;
      filter: none;
      background: url("../img/spape.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 13%;
      top: 26%;
      left: 32.5%;
    }
    100% {
      width: 200px;
      height: 203px;
      border: none;
      filter: none;
      background: url("../img/spape.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 65%;
      top: 34%;
      left: -4%;
    }
}
@keyframes t1Change {
    0% {
      width: 0px;
      height: 0px;
      transform: skew(-25deg) scale(1);
      top: 39%;
      left: 46%;
    }
    20% {
      width: 0px;
      height: 0px;
      transform: skew(-17deg) scale(0.5);
      top: 35%;
      left: 39.5%;
    }
    21% {
      width: 200px;
      height: 203px;
      border: none;
      filter: none;
      background: url("../img/spape.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 13%;
      top: 26%;
      left: 32.5%;
    }
    100% {
      width: 200px;
      height: 203px;
      border: none;
      filter: none;
      background: url("../img/spape.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 65%;
      top: 34%;
      left: -4%;
    }
}
@-moz-keyframes t2Change {
    0% {
      width: 0px;
      height: 0px;
      top: 44%;
      left: 46.5%;
    }
    10% {
      width: 0px;
      height: 0px;
      transform: scale(0);
      top: 43%;
      left: 42.5%;
    }
    11% {
      width: 224px;
      height: 180px;
      border: none;
      filter: none;
      background: url("../img/cap.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 28%;
      top: 30%;
      left: 35%;
    }
    100% {
      width: 224px;
      height: 180px;
      border: none;
      filter: none;
      background: url("../img/cap.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 65%;
      top: 56%;
      left: 4%;
      opacity: 1;
    }
}
@-webkit-keyframes t2Change {
    0% {
      width: 0px;
      height: 0px;
      top: 44%;
      left: 46.5%;
    }
    10% {
      width: 0px;
      height: 0px;
      transform: scale(0);
      top: 43%;
      left: 42.5%;
    }
    11% {
      width: 224px;
      height: 180px;
      border: none;
      filter: none;
      background: url("../img/cap.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 28%;
      top: 30%;
      left: 35%;
    }
    100% {
      width: 224px;
      height: 180px;
      border: none;
      filter: none;
      background: url("../img/cap.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 65%;
      top: 56%;
      left: 4%;
      opacity: 1;
    }
}
@-o-keyframes t2Change {
    0% {
      width: 0px;
      height: 0px;
      top: 44%;
      left: 46.5%;
    }
    10% {
      width: 0px;
      height: 0px;
      transform: scale(0);
      top: 43%;
      left: 42.5%;
    }
    11% {
      width: 224px;
      height: 180px;
      border: none;
      filter: none;
      background: url("../img/cap.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 28%;
      top: 30%;
      left: 35%;
    }
    100% {
      width: 224px;
      height: 180px;
      border: none;
      filter: none;
      background: url("../img/cap.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 65%;
      top: 56%;
      left: 4%;
      opacity: 1;
    }
}
@keyframes t2Change {
    0% {
      width: 0px;
      height: 0px;
      top: 44%;
      left: 46.5%;
    }
    10% {
      width: 0px;
      height: 0px;
      transform: scale(0);
      top: 43%;
      left: 42.5%;
    }
    11% {
      width: 224px;
      height: 180px;
      border: none;
      filter: none;
      background: url("../img/cap.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 28%;
      top: 30%;
      left: 35%;
    }
    100% {
      width: 224px;
      height: 180px;
      border: none;
      filter: none;
      background: url("../img/cap.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 65%;
      top: 56%;
      left: 4%;
      opacity: 1;
    }
}
@-moz-keyframes t3Change {
    0% {
      width: 0px;
      height: 0px;
      transform: skew(17deg);
      top: 58%;
      left: 45%;
    }
    20% {
      width: 0px;
      height: 0px;
      transform: scale(0) skew(17deg);
      top: 62%;
      left: 42.5%;
    }
    21% {
      width: 156px;
      height: 149px;
      border: none;
      filter: none;
      background: url("../img/glasses.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 38%;
      top: 53%;
      left: 38%;
    }
    100% {
      width: 156px;
      height: 149px;
      border: none;
      filter: none;
      background: url("../img/glasses.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 65%;
      top: 70%;
      left: 29%;
      opacity: 1;
    }
}
@-webkit-keyframes t3Change {
    0% {
      width: 0px;
      height: 0px;
      transform: skew(17deg);
      top: 58%;
      left: 45%;
    }
    20% {
      width: 0px;
      height: 0px;
      transform: scale(0) skew(17deg);
      top: 62%;
      left: 42.5%;
    }
    21% {
      width: 156px;
      height: 149px;
      border: none;
      filter: none;
      background: url("../img/glasses.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 38%;
      top: 53%;
      left: 38%;
    }
    100% {
      width: 156px;
      height: 149px;
      border: none;
      filter: none;
      background: url("../img/glasses.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 65%;
      top: 70%;
      left: 29%;
      opacity: 1;
    }
}
@-o-keyframes t3Change {
    0% {
      width: 0px;
      height: 0px;
      transform: skew(17deg);
      top: 58%;
      left: 45%;
    }
    20% {
      width: 0px;
      height: 0px;
      transform: scale(0) skew(17deg);
      top: 62%;
      left: 42.5%;
    }
    21% {
      width: 156px;
      height: 149px;
      border: none;
      filter: none;
      background: url("../img/glasses.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 38%;
      top: 53%;
      left: 38%;
    }
    100% {
      width: 156px;
      height: 149px;
      border: none;
      filter: none;
      background: url("../img/glasses.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 65%;
      top: 70%;
      left: 29%;
      opacity: 1;
    }
}
@keyframes t3Change {
    0% {
      width: 0px;
      height: 0px;
      transform: skew(17deg);
      top: 58%;
      left: 45%;
    }
    20% {
      width: 0px;
      height: 0px;
      transform: scale(0) skew(17deg);
      top: 62%;
      left: 42.5%;
    }
    21% {
      width: 156px;
      height: 149px;
      border: none;
      filter: none;
      background: url("../img/glasses.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 38%;
      top: 53%;
      left: 38%;
    }
    100% {
      width: 156px;
      height: 149px;
      border: none;
      filter: none;
      background: url("../img/glasses.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 65%;
      top: 70%;
      left: 29%;
      opacity: 1;
    }
}
@-moz-keyframes t4Change {
    0% {
      width: 0px;
      height: 0px;
      top: 55%;
      left: 46%;
    }
    20% {
      width: 0px;
      height: 0px;
      transform: scale(0);
      top: 60%;
      left: 43%;
    }
    21% {
      width: 376px;
      height: 298px;
      border: none;
      filter: none;
      background: url("../img/pad.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 18%;
      top: 38%;
      left: 30%;
    }
    100% {
      width: 376px;
      height: 298px;
      border: none;
      filter: none;
      background: url("../img/pad.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 65%;
      top: 76.5%;
      left: -6%;
      opacity: 1;
    }
}
@-webkit-keyframes t4Change {
    0% {
      width: 0px;
      height: 0px;
      top: 55%;
      left: 46%;
    }
    20% {
      width: 0px;
      height: 0px;
      transform: scale(0);
      top: 60%;
      left: 43%;
    }
    21% {
      width: 376px;
      height: 298px;
      border: none;
      filter: none;
      background: url("../img/pad.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 18%;
      top: 38%;
      left: 30%;
    }
    100% {
      width: 376px;
      height: 298px;
      border: none;
      filter: none;
      background: url("../img/pad.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 65%;
      top: 76.5%;
      left: -6%;
      opacity: 1;
    }
}
@-o-keyframes t4Change {
    0% {
      width: 0px;
      height: 0px;
      top: 55%;
      left: 46%;
    }
    20% {
      width: 0px;
      height: 0px;
      transform: scale(0);
      top: 60%;
      left: 43%;
    }
    21% {
      width: 376px;
      height: 298px;
      border: none;
      filter: none;
      background: url("../img/pad.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 18%;
      top: 38%;
      left: 30%;
    }
    100% {
      width: 376px;
      height: 298px;
      border: none;
      filter: none;
      background: url("../img/pad.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 65%;
      top: 76.5%;
      left: -6%;
      opacity: 1;
    }
}
@keyframes t4Change {
    0% {
      width: 0px;
      height: 0px;
      top: 55%;
      left: 46%;
    }
    20% {
      width: 0px;
      height: 0px;
      transform: scale(0);
      top: 60%;
      left: 43%;
    }
    21% {
      width: 376px;
      height: 298px;
      border: none;
      filter: none;
      background: url("../img/pad.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 18%;
      top: 38%;
      left: 30%;
    }
    100% {
      width: 376px;
      height: 298px;
      border: none;
      filter: none;
      background: url("../img/pad.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 65%;
      top: 76.5%;
      left: -6%;
      opacity: 1;
    }
}
@-moz-keyframes t5Change {
    0% {
      width: 0px;
      height: 0px;
      top: 52%;
      left: 51.5%;
    }
    20% {
      width: 0px;
      height: 0px;
      transform: scale(0);
      top: 53%;
      left: 53%;
    }
    21% {
      width: 140px;
      height: 157px;
      border: none;
      filter: none;
      background: url("../img/pen.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 18%;
      top: 43%;
      left: 48%;
    }
    100% {
      width: 140px;
      height: 157px;
      border: none;
      filter: none;
      background: url("../img/pen.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 65%;
      top: 72%;
      left: 90%;
      opacity: 1;
    }
}
@-webkit-keyframes t5Change {
    0% {
      width: 0px;
      height: 0px;
      top: 52%;
      left: 51.5%;
    }
    20% {
      width: 0px;
      height: 0px;
      transform: scale(0);
      top: 53%;
      left: 53%;
    }
    21% {
      width: 140px;
      height: 157px;
      border: none;
      filter: none;
      background: url("../img/pen.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 18%;
      top: 43%;
      left: 48%;
    }
    100% {
      width: 140px;
      height: 157px;
      border: none;
      filter: none;
      background: url("../img/pen.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 65%;
      top: 72%;
      left: 90%;
      opacity: 1;
    }
}
@-o-keyframes t5Change {
    0% {
      width: 0px;
      height: 0px;
      top: 52%;
      left: 51.5%;
    }
    20% {
      width: 0px;
      height: 0px;
      transform: scale(0);
      top: 53%;
      left: 53%;
    }
    21% {
      width: 140px;
      height: 157px;
      border: none;
      filter: none;
      background: url("../img/pen.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 18%;
      top: 43%;
      left: 48%;
    }
    100% {
      width: 140px;
      height: 157px;
      border: none;
      filter: none;
      background: url("../img/pen.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 65%;
      top: 72%;
      left: 90%;
      opacity: 1;
    }
}
@keyframes t5Change {
    0% {
      width: 0px;
      height: 0px;
      top: 52%;
      left: 51.5%;
    }
    20% {
      width: 0px;
      height: 0px;
      transform: scale(0);
      top: 53%;
      left: 53%;
    }
    21% {
      width: 140px;
      height: 157px;
      border: none;
      filter: none;
      background: url("../img/pen.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 18%;
      top: 43%;
      left: 48%;
    }
    100% {
      width: 140px;
      height: 157px;
      border: none;
      filter: none;
      background: url("../img/pen.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 65%;
      top: 72%;
      left: 90%;
      opacity: 1;
    }
}
@-moz-keyframes t6Change {
    0% {
      width: 0px;
      height: 0px;
      top: 48%;
      left: 52.7%;
      transform: skew(-18deg);
    }
    20% {
      width: 0px;
      height: 0px;
      transform: scale(0) skew(-10deg);
      top: 55%;
      left: 55.7%;
    }
    21% {
      width: 92px;
      height: 99px;
      border: none;
      filter: none;
      background: url("../img/rubber.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 38%;
      top: 48%;
      left: 51.7%;
    }
    100% {
      width: 92px;
      height: 99px;
      border: none;
      filter: none;
      background: url("../img/rubber.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 65%;
      top: 71.5%;
      left: 73%;
      opacity: 1;
    }
}
@-webkit-keyframes t6Change {
    0% {
      width: 0px;
      height: 0px;
      top: 48%;
      left: 52.7%;
      transform: skew(-18deg);
    }
    20% {
      width: 0px;
      height: 0px;
      transform: scale(0) skew(-10deg);
      top: 55%;
      left: 55.7%;
    }
    21% {
      width: 92px;
      height: 99px;
      border: none;
      filter: none;
      background: url("../img/rubber.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 38%;
      top: 48%;
      left: 51.7%;
    }
    100% {
      width: 92px;
      height: 99px;
      border: none;
      filter: none;
      background: url("../img/rubber.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 65%;
      top: 71.5%;
      left: 73%;
      opacity: 1;
    }
}
@-o-keyframes t6Change {
    0% {
      width: 0px;
      height: 0px;
      top: 48%;
      left: 52.7%;
      transform: skew(-18deg);
    }
    20% {
      width: 0px;
      height: 0px;
      transform: scale(0) skew(-10deg);
      top: 55%;
      left: 55.7%;
    }
    21% {
      width: 92px;
      height: 99px;
      border: none;
      filter: none;
      background: url("../img/rubber.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 38%;
      top: 48%;
      left: 51.7%;
    }
    100% {
      width: 92px;
      height: 99px;
      border: none;
      filter: none;
      background: url("../img/rubber.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 65%;
      top: 71.5%;
      left: 73%;
      opacity: 1;
    }
}
@keyframes t6Change {
    0% {
      width: 0px;
      height: 0px;
      top: 48%;
      left: 52.7%;
      transform: skew(-18deg);
    }
    20% {
      width: 0px;
      height: 0px;
      transform: scale(0) skew(-10deg);
      top: 55%;
      left: 55.7%;
    }
    21% {
      width: 92px;
      height: 99px;
      border: none;
      filter: none;
      background: url("../img/rubber.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 38%;
      top: 48%;
      left: 51.7%;
    }
    100% {
      width: 92px;
      height: 99px;
      border: none;
      filter: none;
      background: url("../img/rubber.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 65%;
      top: 71.5%;
      left: 73%;
      opacity: 1;
    }
}
@-moz-keyframes t7Change {
    0% {
      width: 0px;
      height: 0px;
      top: 40%;
      left: 55%;
    }
    10% {
      width: 0px;
      height: 0px;
      transform: scale(0) skew(18deg);
      top: 42%;
      left: 57%;
    }
    11% {
      width: 612px;
      height: 570px;
      border: none;
      filter: none;
      background: url("../img/pape.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 0%;
      top: 44%;
      left: 38%;
    }
    100% {
      width: 612px;
      height: 570px;
      border: none;
      filter: none;
      background: url("../img/pape.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 65%;
      top: 29%;
      left: 71.5%;
      opacity: 1;
      z-index: -1;
      transform: skew(0);
    }
}
@-webkit-keyframes t7Change {
    0% {
      width: 0px;
      height: 0px;
      top: 40%;
      left: 55%;
    }
    10% {
      width: 0px;
      height: 0px;
      transform: scale(0) skew(18deg);
      top: 42%;
      left: 57%;
    }
    11% {
      width: 612px;
      height: 570px;
      border: none;
      filter: none;
      background: url("../img/pape.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 0%;
      top: 44%;
      left: 38%;
    }
    100% {
      width: 612px;
      height: 570px;
      border: none;
      filter: none;
      background: url("../img/pape.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 65%;
      top: 29%;
      left: 71.5%;
      opacity: 1;
      z-index: -1;
      transform: skew(0);
    }
}
@-o-keyframes t7Change {
    0% {
      width: 0px;
      height: 0px;
      top: 40%;
      left: 55%;
    }
    10% {
      width: 0px;
      height: 0px;
      transform: scale(0) skew(18deg);
      top: 42%;
      left: 57%;
    }
    11% {
      width: 612px;
      height: 570px;
      border: none;
      filter: none;
      background: url("../img/pape.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 0%;
      top: 44%;
      left: 38%;
    }
    100% {
      width: 612px;
      height: 570px;
      border: none;
      filter: none;
      background: url("../img/pape.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 65%;
      top: 29%;
      left: 71.5%;
      opacity: 1;
      z-index: -1;
      transform: skew(0);
    }
}
@keyframes t7Change {
    0% {
      width: 0px;
      height: 0px;
      top: 40%;
      left: 55%;
    }
    10% {
      width: 0px;
      height: 0px;
      transform: scale(0) skew(18deg);
      top: 42%;
      left: 57%;
    }
    11% {
      width: 612px;
      height: 570px;
      border: none;
      filter: none;
      background: url("../img/pape.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 0%;
      top: 44%;
      left: 38%;
    }
    100% {
      width: 612px;
      height: 570px;
      border: none;
      filter: none;
      background: url("../img/pape.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 65%;
      top: 29%;
      left: 71.5%;
      opacity: 1;
      z-index: -1;
      transform: skew(0);
    }
}
@-moz-keyframes t8Change {
    0% {
      width: 0px;
      height: 0px;
      top: 36%;
      left: 52%;
    }
    20% {
      width: 0px;
      height: 0px;
      transform: scale(0);
      top: 35%;
      left: 60%;
    }
    21% {
      width: 140px;
      height: 157px;
      border: none;
      filter: none;
      background: url("../img/scup.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 38%;
      top: 24%;
      left: 55%;
    }
    100% {
      width: 140px;
      height: 157px;
      border: none;
      filter: none;
      background: url("../img/scup.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 60%;
      top: 30%;
      left: 74%;
      opacity: 1;
    }
}
@-webkit-keyframes t8Change {
    0% {
      width: 0px;
      height: 0px;
      top: 36%;
      left: 52%;
    }
    20% {
      width: 0px;
      height: 0px;
      transform: scale(0);
      top: 35%;
      left: 60%;
    }
    21% {
      width: 140px;
      height: 157px;
      border: none;
      filter: none;
      background: url("../img/scup.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 38%;
      top: 24%;
      left: 55%;
    }
    100% {
      width: 140px;
      height: 157px;
      border: none;
      filter: none;
      background: url("../img/scup.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 60%;
      top: 30%;
      left: 74%;
      opacity: 1;
    }
}
@-o-keyframes t8Change {
    0% {
      width: 0px;
      height: 0px;
      top: 36%;
      left: 52%;
    }
    20% {
      width: 0px;
      height: 0px;
      transform: scale(0);
      top: 35%;
      left: 60%;
    }
    21% {
      width: 140px;
      height: 157px;
      border: none;
      filter: none;
      background: url("../img/scup.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 38%;
      top: 24%;
      left: 55%;
    }
    100% {
      width: 140px;
      height: 157px;
      border: none;
      filter: none;
      background: url("../img/scup.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 60%;
      top: 30%;
      left: 74%;
      opacity: 1;
    }
}
@keyframes t8Change {
    0% {
      width: 0px;
      height: 0px;
      top: 36%;
      left: 52%;
    }
    20% {
      width: 0px;
      height: 0px;
      transform: scale(0);
      top: 35%;
      left: 60%;
    }
    21% {
      width: 140px;
      height: 157px;
      border: none;
      filter: none;
      background: url("../img/scup.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 38%;
      top: 24%;
      left: 55%;
    }
    100% {
      width: 140px;
      height: 157px;
      border: none;
      filter: none;
      background: url("../img/scup.png") no-repeat;
      background-position-x: 0;
      background-position-y: 0;
      background-size: 60%;
      top: 30%;
      left: 74%;
      opacity: 1;
    }
}
}
